<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>健康幸福320</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/openhole/openhole.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
	<style>
		.priest.footer{
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translate(-50%,0);
			-webkit-transform: translate(-50%,0);
		}
	</style>
</head>
<body>
    <div class="container">
        <span class="center nowTime">{$nowTime}</span>
        <span class="center hour">{$date}({$timeSlot})</span>
        <span class="center hole">
		{$hole}
		</span>
        <span class="center explain">轻轻按住穴位，保持27分钟。</span>
		<volist name="holeIndex" id="h">
        <img class="center holeImg" src="{$Think.config.RESOURCEURL}wx_assets/openhole/img/hole{$h}.jpg{$Think.config.RESOURCE_VER}"/>
		</volist>
        <img class="center priest" src="{$Think.config.RESOURCEURL}wx_assets/openhole/img/priest.jpg{$Think.config.RESOURCE_VER}" />
    </div>
</body>
<script>
	var t_img; // 定时器
	var isLoad = true; // 控制变量
	isImgLoad(function(){
		if($(document).height()<$(window).height()){
			$("html").css("height","100%");
			$("body").css("height","100%");
			$(".container").css("height","100%");
			$(".priest").addClass("footer");
		}
	})
	// 判断图片加载的函数
	function isImgLoad(callback){
		// 注意我的图片类名都是cover，因为我只需要处理cover。其它图片可以不管。
		// 查找所有封面图，迭代处理
		$('img').each(function(){
			// 找到为0就将isLoad设为false，并退出each
			if(this.height === 0){
				isLoad = false;
				return false;
			}
		});
		// 为true，没有发现为0的。加载完毕
		if(isLoad){
			clearTimeout(t_img); // 清除定时器
			// 回调函数
			callback();
		// 为false，因为找到了没有加载完成的图，将调用定时器递归
		}else{
			isLoad = true;
			t_img = setTimeout(function(){
				isImgLoad(callback); // 递归扫描
			},500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
		}
	}
    $(".holeImg").click(function(){
        var imgs = new Array(0);
        imgs.push($(this).attr("src"));
        wx_share.showImg(imgs);
    });
    var shareUrl = "http://mp.weixin.qq.com/s?__biz=MzIzMzE4MTE0NA==&mid=401505003&idx=1&sn=a79b58728aabffd534bfb60c50f2ccc3&scene=1&srcid=0201MYL0ZR9slamUTicrQNGm&from=groupmessage&isappinstalled=0#wechat_redirect";
    wx_share.init({
        "title":"健康幸福320",
        "desc":'关注健康幸福320，查询当前时辰对应的穴位。',
        "link":shareUrl,
        "imgUrl": $.trim($(".priest").attr("src")),
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        }
    });
</script>
</html>